<script setup lang="ts">
import type { WorkFlow } from '@/api/djRecord'
import { onMounted, ref } from 'vue'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'

const route = useRoute()

const workFlow = ref({} as WorkFlow['infoVo'])
const queryWorkFlow = async () => {
  const [error, res] = await sendRequest({
    module: 'djRecord',
    api: 'workFlow',
    override: {
      params: {
        djRecordId: route.query.id
      }
    }
  })

  if (error) throw error
  if (res.code !== 0) throw new Error(res.msg)
  workFlow.value = res.data.infoVo || {}
}

onMounted(() => queryWorkFlow())
</script>

<template>
  <div class="ai-title">审批信息</div>
  <div class="ai-card">
    <div class="ai-cur">
      <div class="cur-item">
        <span>审批状态</span>
        <span>{{ workFlow.status }}</span>
      </div>
      <div class="cur-item">
        <span>审批流程</span>
        <span>
          <template
            v-for="(e, i) in workFlow.workflowList"
            :key="i"
          >
            <span :class="e.value && 'underline'">
              {{ e.key }}
            </span>
            <span v-if="i !== workFlow.workflowList.length - 1">→</span>
          </template>
        </span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ai-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
}

.ai-card {
  padding: 20rem;
  background-color: #e1e1e1;

  &.form {
    display: flex;
    gap: 0 32rem;
  }
}

.ai-cur {
  display: flex;
  gap: 0 32rem;
  flex-wrap: wrap;
}

.cur-item {
  display: flex;
  flex-direction: column;
  gap: 5px 0;
  min-width: 150px;
  padding: 13px 12px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background-color: #f2f2f2;
}

.cur-item .underline {
  text-decoration: underline #5fb17f;
}

.cur-item span:last-child {
  font-weight: 500;
  font-size: 16px;
  color: #5fb17f;
}
</style>
